@import "vars"

@media only screen and (max-device-width: 750px)
  header
    padding: 60px 30px 60px 30px
    .logo
      margin-left: 10px
    .header-text
      grid-column: 1 / 3
      grid-template-rows: auto
      h1
        text-align: center
        font-size: 40pt
        padding: 30px 0 0 0
      p
        margin-top: 70px
        text-align: center
        font-size: 23pt
        padding: 0 40px 70px 40px
      .btn-get
        justify-self: center
        width: 75%
        height: 75px
        font-size: 17pt
    .header-img
      margin: 100px 50px 0 50px
      grid-column: 1 / 3
  .content
    margin: 70px 40px 180px 40px
    h2
      text-align: center
    .content-item1
      grid-template-columns: 1fr
      grid-template-rows: 1fr
      padding: 100px 40px 60px 40px
      .sec-item1
        grid-area: text
      .sec-item2
        grid-area: image
      grid-template-areas: "image image" "text text"
    .border-sec
      h2
        margin-top: 50px
        margin-bottom: 30px
        font-size: 30pt
      p
        text-align: center
        font-size: 20pt
        color: $color-neutral-blue
    .content-item2
      grid-template-columns: 1fr
      grid-template-rows: 1fr
      padding: 100px 40px 70px 40px
      .sec-item2
        text-align: center
    .content-item3
      grid-template-columns: 1fr
      grid-template-rows: 1fr
      padding: 100px 40px 70px 40px
      text-align: center
      .sec-item2
        grid-area: image
      .sec-item3
        grid-area: text
      grid-template-areas: "image" "text"
  .etc-block
    width: 94%
    top: -25vh
    h1
      font-size: 28pt
  .footer .footer-item1
    padding-left: 30px
    display: flex
    flex-wrap: wrap
    font-size: 22pt
    .email
      margin-bottom: 70px
    .menu-footer
      width: 90%
      display: grid
      grid-template-columns: 1fr
    .social-icon
      width: 90%
      display: flex
      justify-content: center
      margin-bottom: 50px
      img
        width: 60px
    .copyright
      display: grid
      grid-column: auto
      justify-self: center
      margin-bottom: 100px




/*==========  Desktop First  ==========*/

// ≥1200px
//+media-breakpoint-down(lg)

// ≥992px
//+media-breakpoint-down(md)

// ≥768px
//+media-breakpoint-down(sm)

// ≥576px
//+media-breakpoint-down(xs)


/*==========  Mobile First  ==========*/

// ≤576px
//+media-breakpoint-up(sm)

// ≤768px
//+media-breakpoint-up(md)

// ≤992px
//+media-breakpoint-up(lg)

// ≤1200px
//+media-breakpoint-up(xl)
